<template>
  <div class="new-receivable-plan-list">
    <!-- 操作栏 -->
    <el-row justify="end">
      <el-button
        type="primary"
        @click="openForm('create', undefined)"
        class="!bg-#ebecf0 !color-#42526b"
        style="border: none"
      >
        <Icon class="mr-5px" icon="ep:plus" />
        新增回款计划
      </el-button>
    </el-row>

    <!-- 列表 -->
    <ContentWrap class="receivable mt-10px">
      <el-table
        border
        :header-cell-style="tableHeaderColor"
        v-loading="loading"
        :data="list"
        :show-overflow-tooltip="true"
        :stripe="true"
        @row-click="rowClick"
      >
        <el-table-column align="center" label="客户名称" prop="customerName" width="150px" />
        <el-table-column align="center" label="合同编号" prop="contractNo" width="200px" />
        <el-table-column align="center" label="期数" prop="period">
          <template #default="scope">
            <span class="color-#0052cc cursor-pointer"> {{ scope.row.period }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="计划回款(元)"
          prop="price"
          width="120"
          :formatter="erpPriceTableColumnFormatter"
        />
        <el-table-column
          :formatter="dateFormatter2"
          align="center"
          label="计划回款日期"
          prop="returnTime"
          width="180px"
        />
        <el-table-column align="center" label="提前几天提醒" prop="remindDays" width="150" />
        <el-table-column
          :formatter="dateFormatter2"
          align="center"
          label="提醒日期"
          prop="remindTime"
          width="180px"
        />
        <el-table-column label="负责人" prop="ownerUserName" width="120" />
        <el-table-column align="center" label="备注" prop="remark" />
        <el-table-column align="center" fixed="right" label="操作" width="100px">
          <template #default="scope">
            <el-button
              v-hasPermi="['crm:receivable:create']"
              link
              type="primary"
              @click="createReceivable(scope.row)"
              :disabled="scope.row.receivableId"
            >
              创建回款
            </el-button>
            <!-- <el-button
              v-hasPermi="['crm:receivable-plan:update']"
              link
              type="primary"
              @click="openForm('update', scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              v-hasPermi="['crm:receivable-plan:delete']"
              link
              type="danger"
              @click="handleDelete(scope.row.id)"
            >
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    /> -->
      <div
        class="color-#0052cc text-14px text-center mt-10px"
        style="cursor: pointer"
        v-if="!isMore"
      >
        <div @click="pageNext">
          <div>加载更多</div>
          <svg
            t="1742280566606"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1500"
            width="20"
            height="20"
          >
            <path
              d="M794.819048 502.247619c9.752381 9.752381 9.752381 29.257143 0 39.009524l-258.438096 234.057143c-4.87619 4.87619-14.628571 9.752381-19.504762 9.752381-9.752381 0-14.628571-4.87619-19.504761-9.752381l-258.438096-234.057143c-4.87619-4.87619-9.752381-9.752381-9.752381-19.504762s4.87619-14.628571 9.752381-19.504762c14.628571-9.752381 29.257143-9.752381 43.885715 0l234.057142 214.552381 238.933334-214.552381c9.752381-9.752381 29.257143-9.752381 39.009524 0z m-9.752381-248.685714c9.752381 9.752381 9.752381 29.257143 0 39.009524l-258.438096 234.057142c-4.87619 4.87619-14.628571 9.752381-19.504761 9.752381-9.752381 0-14.628571-4.87619-19.504762-9.752381L229.180952 287.695238c-4.87619-4.87619-9.752381-9.752381-9.752381-19.504762s4.87619-14.628571 9.752381-19.504762c14.628571-9.752381 29.257143-9.752381 43.885715 0l234.057143 214.552381 234.057142-214.552381c14.628571-9.752381 29.257143-9.752381 43.885715 4.876191z"
              fill="#0052cc"
              p-id="1501"
            ></path>
          </svg>
        </div>
      </div>
      <div class="color-#6b778c text-14px text-center mt-10px" v-else>没有更多数据了</div>
    </ContentWrap>

    <!-- 表单弹窗：添加 -->
    <ReceivableForm ref="formRef" @success="handleQuery" />

    <!-- 详情弹窗 -->
    <CrmSpec ref="crmSpec" @getPage="handleQuery" />
  </div>
</template>
<script lang="ts" setup>
import * as ReceivablePlanApi from '@/api/crm/receivable/plan'
import ReceivableForm from './../ReceivablePlanForm.vue'
import { dateFormatter2 } from '@/utils/formatTime'
import { erpPriceTableColumnFormatter } from '@/utils'

defineOptions({ name: 'CrmReceivablePlanList' })
const props = defineProps<{
  customerId?: number // 客户编号
  contractId?: number // 合同编号
}>()

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  customerId: undefined as unknown, // 允许 undefined + number
  contractId: undefined as unknown // 允许 undefined + number
})
const isMore = computed(() => {
  if (list.value.length != total.value) {
    return false
  } else {
    return true
  }
})
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    if (props.customerId && !props.contractId) {
      queryParams.customerId = props.customerId
    } else if (props.customerId && props.contractId) {
      // 如果是合同的话客户编号也需要带上因为权限基于客户
      queryParams.customerId = props.customerId
      queryParams.contractId = props.contractId
    }
    const data = await ReceivablePlanApi.getReceivablePlanPageByCustomer(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/**下一页*/
const pageNext = async () => {
  queryParams.pageNo += 1
  loading.value = true
  try {
    if (props.customerId && !props.contractId) {
      queryParams.customerId = props.customerId
    } else if (props.customerId && props.contractId) {
      // 如果是合同的话客户编号也需要带上因为权限基于客户
      queryParams.customerId = props.customerId
      queryParams.contractId = props.contractId
    }
    const data = await ReceivablePlanApi.getReceivablePlanPageByCustomer(queryParams)
    data.list.map((item) => {
      list.value.push(item)
    })
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  // 置空参数
  queryParams.customerId = undefined
  queryParams.contractId = undefined
  getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id, props.customerId, props.contractId)
}

/** 创建回款 */
const emits = defineEmits<{
  (e: 'createReceivable', v: ReceivablePlanApi.ReceivablePlanVO)
}>()
const createReceivable = (row: ReceivablePlanApi.ReceivablePlanVO) => {
  emits('createReceivable', row)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ReceivablePlanApi.deleteReceivablePlan(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 监听打开的 customerId + contractId，从而加载最新的列表 */
watch(
  () => [props.customerId, props.contractId],
  (newVal) => {
    // 保证至少客户编号有值
    if (!newVal[0]) {
      return
    }
    handleQuery()
  },
  { immediate: true, deep: true }
)

// 更改表头颜色
const tableHeaderColor = () => {
  return { background: '#fff', color: '#6b778c' }
}
const crmSpec = ref(null)
const rowClick = (row, column) => {
  if (column.property == undefined) return
  const nowIds = list.value.map((item) => item.id)
  crmSpec.value.setDrawer(true, 'receivablePlan', row.id, nowIds)
}
</script>
<style scoped>
.receivable >>> .el-card__body {
  padding: 0;
}
.new-receivable-plan-list {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 0 8px;
  padding: 16px;
}
</style>
